<template>
	<!--登录 -->
	<view class="page-content">
		<view class="page-body">
			<view class="body-box">
				<add-pop-li :params="objdata" :title="flowname" :value="imgs" :pageType="pageType" @chooseImg="chooseImg" @imgDelete="imgDelete"></add-pop-li>
				<view class="body-box-txt">(354*194像素)</view>
			</view>
			<view class="btn-box">
				<view class="submit" @tap="confirm()">确认</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getOssUploadsParams,
		addPictureAlbums,
		addTasks // 添加pop任务
	} from '@/common/api.js';
	import store from '@/store'
	import wTit from '@/components/w-tit/w-tit-back.vue';
	import addPopLi from '@/pages/components/add_pop_li.vue'
	export default {
		components: {
			wTit,
			addPopLi
		},
		data() {
			return {
				objdata: {
					company_id:'',
					name: '',
					img:'',
				},
				params:{
					company_id:'',
					title: '',
					img:'',
					type:'',
					flow_path_id:''
				},
				flowname:'',
				imgs: [],
				required:false,
				pageType:'',
				sourceType:['album', 'camera'],
				chooseNum:1,
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo']),
		},
		onLoad(option) {
			console.log(222,option)
			this.objdata.company_id = this.companyInfo.id;
			this.params.company_id = this.companyInfo.id;
			if (option.type === 'add') {
				// 导航栏多语言
				uni.setNavigationBarTitle({
					title: '创建品牌'
				});
			} else if (option.type === 'edit') {
				// 导航栏多语言
				uni.setNavigationBarTitle({
					title: '编辑品牌'
				});
			}
			if(option.pageType){
				this.pageType = option.pageType
			}
		},
		methods: {
			...mapActions('user', ['setToken']),
			resdata2(item){
				console.log(2222,item)
				this.flowname = item.title;
				this.params.flow_path_id = item.id;
			},
			confirm(){
				this.objdata.img = this.imgs[0];
				let resData = this.objdata;
				if(resData.name === ''){
					uni.showToast({
						title:'名称不能为空！',
						icon:'none',
						duration:2000
					})
					return
				}
				if(resData.img === ''){
					uni.showToast({
						title:'请上传封面图片！',
						icon:'none',
						duration:2000
					})
					return
				}
				if(this.pageType === 'pro'){
					addPictureAlbums(resData).then(res=>{
						if(res.code === 2000){
							uni.showToast({
								title:'保存成功！',
								icon:'none',
								duration:2000
							})
						}
						this.$util.prePage().resdata();
						setTimeout(() => {
							uni.navigateBack();
						}, 500)
					})
				}else if(this.pageType === 'pop'){
					if(this.params.flow_path_id === ''){
						uni.showToast({
							title:'请选择流程！',
							icon:'none',
							duration:2000
						})
						return
					}
					this.params.type = 1;
					this.params.title = resData.name;
					this.params.img = resData.img;
					addTasks(this.params).then(res=>{
						if(res.code === 2000){
							uni.showToast({
								title:'保存成功！',
								icon:'none',
								duration:2000
							})
						}
						this.$util.prePage().resdata();
						setTimeout(() => {
							//uni.navigateBack();
							uni.navigateTo({
								url: `/pages/user/userCreateProp?id=${res.data}&title=${this.params.title}&pageType=pop`
							})
						}, 500)
					})
				}else if(this.pageType === 'prop'){
					if(this.params.flow_path_id === ''){
						uni.showToast({
							title:'请选择流程！',
							icon:'none',
							duration:2000
						})
						return
					}
					this.params.type = 2;
					this.params.title = resData.name;
					this.params.img = resData.img;
					addTasks(this.params).then(res=>{
						if(res.code === 2000){
							uni.showToast({
								title:'保存成功！',
								icon:'none',
								duration:2000
							})
						}
						this.$util.prePage().resdata();
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/user/userCreateProp?id=${res.data}&title=${this.params.title}&pageType=prop`
							})
							//uni.navigateBack();
						}, 500)
					})
				}
			},
			tobrand() {
				uni.navigateTo({
					url:'/pages/brandCreation/brandList'
				})
			},
			chooseImg(){
				uni.chooseImage({
					count: this.chooseNum,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: this.sourceType,
					success: (tempFilePaths) => {
						
						console.log('选择文件：', tempFilePaths)
						let _self = this;
						uni.showLoading({
							title: '上传中'
						});
						let uploadImgs = [];
						getOssUploadsParams().then(res => {
							if (res.code === 2000) {
								tempFilePaths.tempFilePaths.forEach((item, index) => {
									uploadImgs.push(new Promise((resolve, reject) => {
										let file_path = item;
										let filename = tempFilePaths.tempFiles[index];
										let suffix = "." + _self.getCaption(filename.path);
										let file_name = new Date().getTime() + Math.random().toString(
											36).substring(3, 20) + suffix
										console.log(333333, file_name, filename)
										//上传图片接口
										uni.uploadFile({
											url: res.data.host,
											filePath: file_path,
											fileType: 'image',
											name: 'file',
											formData: {
												name: file_path,
												'key': res.data.dir + file_name,
												'policy': res.data.policy,
												'OSSAccessKeyId': res.data.accessid,
												'success_action_status': '200',
												//让服务端返回200,不然，默认会返回204
												'signature': res.data.signature,
											},
											success: (res2) => {
												resolve(res2);
												console.log('uploadImage success, res is:',
													res2)
												let imgs = ''
												imgs = res.data.host + '/' + res.data
													.dir + file_name;
												_self.imgs.push(imgs)
												console.log(666, _self.imgs)
												uni.showToast({
													title: '上传成功',
													icon: 'success',
													duration: 1000
												});
											},
											fail: (err) => {
												console.log(err);
												reject(err);
											},
											complete: () => {
												//uni.hideLoading();
											}
										});
									}))
									Promise.all(uploadImgs).then((results) => { //执行所有需请求的接口
											uni.hideLoading();
										})
										.catch((res3, object) => {
											uni.hideLoading();
										});
						
								})
							}
						})
					}
				});
			},
			imgDelete(e){
				console.log(33, e)
				let imgs = this.imgs
				imgs.splice(e, 1)
				this.imgs = imgs;
				console.log(44,this.imgs)
			},
			getCaption(obj){
			    var index = obj.lastIndexOf("\.");
			    obj = obj.substring(index+1,obj.length);
			    return obj;
			},
			//跳转忘记密码
			toforget() {
				uni.navigateTo({
					url: `/pages/login/forget`
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.det-con-more {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		color: #bbb;
		font-size: 24rpx;
	}

	.icon-tb {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background: $uni-bg-color;
		width: 100vw;
		height: 100%;

		.page-body {
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.body-box {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				.body-box-txt{
					display: flex;
					flex-direction: row-reverse;
					margin-top: 30rpx;
					font-size: 20rpx;
					font-weight: bold;
					line-height: 14px;
					color: #FE5252;
				}
				.input-row {
					display: flex;
					align-items: center;
					width: 100%;
					flex-direction: row;
					background: $uni-bg-box-color;
							
					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-3;
						font-size: 28rpx;
					}
					.input-row-t{
						font-size: 32rpx;
						color: #333333;
					}
				}
				.input-row-img {
					display: flex;
					flex: 1;
					width: 100%;
					flex-direction: column;
					background: $uni-bg-box-color;
							
					.input-row-w {
						display: flex;
						flex: 1;
						width: 100%;
						color: $font-color-3;
						font-size: 28rpx;
					}
					.input-row-t{
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 20rpx;
					}
				}
			}

			.btn-box {
				width: 100%;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				height: 90rpx;
				display: flex;
				flex-shrink: 0;
				flex-direction: row !important;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 90rpx;
				color: $font-color-w;
			
				.submit {
					text-align: center;
					flex: 2;
					background-color: #198FFF;
				}
			}
		}
	}
</style>
